<template>
  <div class="main">
    <div>
      <el-button type="primary"
                 round
                 icon="el-icon-edit"
                 @click="openDialog('add')">添加商品</el-button>
      <el-input placeholder="请输入内容"
                v-model="goodForm.name"
                class="input-with-select">
        <el-select v-model="goodForm.menuId"
                   slot="prepend"
                   placeholder="请选择商品的菜单"
                   class="sel">
          <el-option :label="item.name"
                     :value="item.id"
                     v-for="(item,index) in menuList"
                     :key="'list'+index"></el-option>
        </el-select>
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="refreshTab()"></el-button>
      </el-input>
    </div>
    <open-form-dialog ref="openDialog"
                      @query="queryList"></open-form-dialog>
    <el-tabs v-model="active"
             ref="tabs"
             type="card"
             @tab-click="handleClick"
             class="tab">
      <el-tab-pane :label="item.label"
                   v-for="(item) in tabs"
                   :key="item.key"
                   :name="item.key">
        <keep-alive>
          <listTab @open="openDialog"
                   ref="tb"></listTab>
        </keep-alive>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import openFormDialog from './components/openFormDialog.vue'
import listTab from './components/list.vue'
import { list } from '@/api/menu'

export default {
  data () {
    return {
      active: 'all',
      goodForm: {},
      tabs: [
        { label: '全部商品', key: 'all' },
        { label: '上架', key: 'ACTIVE' },
        { label: '下架', key: 'UNACTIVE' },
      ],
      menuList: []
    }
  },
  components: {
    'open-form-dialog': openFormDialog,
    listTab
  },
  created () {
    // this.handleClick();
    list({}).then((res) => {
      this.menuList = res.data
      console.log(this.menuList);
    })
  },
  methods: {
    openDialog (type, row) {
      console.log(type, row);
      this.$refs.openDialog.openForm(type, row, this.active);
    },
    handleClick (tab) {
      this.active = this.active
      tab.$children[0].list(this.active, this.goodForm);
    },
    queryList () {
      console.log(this.$refs);
      this.$refs.tabs.handleTabClick()
      // this.$refs.tb.list(this.active);
      // this.$refs.tb.refresh()
    },
    refreshTab () {
      if (this.active === 'all') {
        this.$refs.tb[0].list(this.active, this.goodForm)
      } else if (this.active === 'ACTIVE') {
        this.$refs.tb[1].list(this.active, this.goodForm)
      } else if (this.active === 'UNACTIVE') {
        this.$refs.tb[2].list(this.active, this.goodForm)
      }
    },
  }
}
</script>

<style scoped>
.main {
  padding: 20px;
}
.el-select .el-input {
  width: 130px;
}
/deep/ .sel {
  width: 160px;
}

/deep/ .input-with-select {
  width: 32%;
  margin-left: 5%;
}

/deep/ .tab {
  margin-top: 20px;
}
/deep/ .tab > .el-tabs__header {
  margin: 0px;
}
</style>